// pages/category/index.js
import {request} from "../../request/index.js"
import regeneratorRuntime from "../../lib/runtime/runtime.js";
Page({ 
  /**
   * 页面的初始数据
   */
  data: {
    //  左侧菜单的数据
    leftMenuList:[],
    // 右侧的商品数据
    rightContent:[],
    // 被点击的 左侧的菜单
    currentIndex:0,
    // 右侧内容的滚动条距离顶部的距离
    scrollTop:0
  },

  // 接口的返回数据
   Cates:[],

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    /**
     * 1 判断缓存有没有数据
     * 2 如果没有 就直接发送请求
     * 3 有旧数据  同时 旧的数据 也没有过期 就使用 本地存储中的数据
     */ 

      //  1 获取本地存储数据
      const cates = wx.getStorageSync("cates");
      // 2 判断
      if(!cates){
        console.log('第一次发送请求')
        this.getCates()
      }else{
        // 有旧的数据 10s 改成 5分钟
        if(Date.now() - cates.time > 1000 * 10){
          console.log('重新发送请求')
          // 重新发送请求
          this.getCates()
        }else{
           // 可以使用旧的数据
           console.log('可以使用旧的数据')
           this.Cates = cates.data;
            // 构造左侧的大菜单数据
            let leftMenuList = this.Cates.map(v=>v.cat_name)  
            // 构造右侧的商品数据
            let rightContent = this.Cates[0].children
            this.setData({
              leftMenuList,
              rightContent
            })
        }
      }

  
  }, 
  // 获取分类数据
  async getCates(){
    // request({
    //   url:"/categories"
    // })
    // .then((res)=>{
    //   // console.log(res)
    //  this.Cates = res.data.message 
     
    //  // 把接口数据存储到本地存储中
    //  wx.setStorageSync('cates', {time:Date.now(),data:this.Cates});  
    //   // 构造左侧的大菜单数据
    //   let leftMenuList = this.Cates.map(v=>v.cat_name)  
    //   // 构造右侧的商品数据
    //   let rightContent = this.Cates[0].children
    //   this.setData({
    //     leftMenuList,
    //     rightContent
    //   })
    // })

    const res = await request({url:"/categories"})
    // this.Cates = res.data.message  
    this.Cates = res   
     // 把接口数据存储到本地存储中
     wx.setStorageSync('cates', {time:Date.now(),data:this.Cates});  
    // 构造左侧的大菜单数据
    let leftMenuList = this.Cates.map(v=>v.cat_name)  
    // 构造右侧的商品数据
    let rightContent = this.Cates[0].children
    this.setData({
      leftMenuList,
      rightContent
    })
  },

  // 左侧菜单的点击事件
  handleItemTap(e){
    // 1 获取被点击的索引 
    const {index} = e.currentTarget.dataset;  
     // 构造右侧的商品数据
    let rightContent = this.Cates[index].children 
    // 2 设置点击索引  根据不同的索引 渲染右侧的商品内容
    // 重新设置内容的 scroll-top 
    this.setData({
      currentIndex: index,
      rightContent,
      scrollTop:0
    })
 
  }, 
  // 左侧菜单的点击事件

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})